<template>
    <el-container style="text-align: right; font-size: 12px">
        <el-backtop :bottom="60"></el-backtop>
        <!--********** 头部 -->
        <el-header style="height:auto"
                   :class="addpadding">
            <e-header></e-header>
        </el-header>
        <!--********** 主体 -->
        <el-main style="height:auto"
                 :class="bacColor">
            <div class="mo_login"
                 v-loading="loading"
                 element-loading-text="拼命加载中"
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="#ffffff">
                <div class="addbreadcrumb">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/Mypublish' }">{{name}}</el-breadcrumb-item>
                        <el-breadcrumb-item>{{text_title}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>

                <div class="periphery">
                    <div class="p-title">
                        <p>{{text_title}}</p>
                    </div>
                    <div class="p-mesg">
                        <span class="addright">{{text_date}} </span> <span class="addleft">{{name}}</span>
                    </div>
                    <div class="p-img">
                        <el-image class="addimg"
                                  :src="text_img"
                                  fit="cover"></el-image>
                    </div>
                    <div class="p-text"
                         v-html="text_content">{{text_content}}
                    </div>
                     <div class="p-comment">
                        <e-comment></e-comment>
                    </div>
                    <div class="up-next">
                        <div class="text-up"
                             @click="reduce()">
                            <p class="addcolor textOut">上一篇:{{text_up}} </p>
                        </div>
                        <div class="text-next"
                             @click="addnum()">
                            <p class="addcolor textOut">下一篇:{{text_next}}</p>
                        </div>
                    </div>
                </div>

            </div>
        </el-main>
        <!--********** 底部 -->
        <el-footer style="height:auto">
            <e-footer></e-footer>
        </el-footer>
    </el-container>
</template>
<script>
import eHeader from "@/components/public/MesHeader.vue";
import eFooter from "@/components/public/Footer.vue";
import eComment from "@/components/public/Comment.vue";
export default {
    components: {
        eHeader,
        eFooter,
        eComment
    },
    data() {
        return {
            text_title: "",
            text_date: "",
            name: "",
            text_img: "",
            text_content: "",
            addpadding: "addpadding",
            bacColor: "#F0FFFE",
            accessId: 0,
            textid: 0,
            addTotal: 0,
            textid: "",
            cate_id: "",
            text_up: "",
            text_up_id: "",
            text_next: "",
            text_next_id: "",
            loading: false,
        };
    },
    created() {
        //读取sessionStorage的ID
        this.accessId = localStorage.getItem('accessId')
        this.textid = sessionStorage.getItem('Details');
        this.addTotal = sessionStorage.getItem('Detailstotal');
        this.getMesDetials(this.textid, this.accessId);
        sessionStorage.removeItem('Details');
        sessionStorage.removeItem('Detailstotal');

        let getColor = localStorage.getItem('background-color')
        let Colorarr = getColor.slice(1, 7)
        this.bacColor = Colorarr
    },
    mounted() {  
        this.$bus.$on('changeColor', (e) => {
            this.addpadding = "addpadding";
            if (this.bacColor != e) {
                let Colorarr = e.slice(1, 7)
                this.bacColor = Colorarr
            }
        })
    },
    methods: {
        // 文章详情接口
        getMesDetials(textid, cate_id) {
            let _this = this;
            this.loading = true
            let Url = "/articledetail?a_id=" + textid + "&m_id=" + cate_id
            let Params = {};
            _this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        let adddata = resdata.data


                        _this.text_title = adddata.title,
                            _this.text_date = adddata.created_at,
                            _this.name = adddata.name,
                            _this.text_img = adddata.thumb,
                            _this.text_content = adddata.content,
                            _this.text_up_id = adddata.mpaid,
                            _this.text_next_id = adddata.mnaid

                        
                        this.getUpMesDetials(_this.text_up_id, _this.accessId);
                        this.getNextMesDetials(_this.text_next_id, _this.accessId);

                        this.loading = false
                        break;
                    case 1002:
                        this.loading = false
                        //console.log(resdata.msg)
                        break
                }
            });
        },
        //上一篇
        getUpMesDetials(textid, cate_id) {
            let _this = this;
            this.loading = true
            let Url = "/articledetail?a_id=" + textid + "&m_id=" + cate_id
            let Params = {};
            _this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        let adddata = resdata.data
                        if (adddata == null) {
                            _this.text_up = "没有上一篇了"
                        }
                        else {
                            _this.text_up = adddata.title
                        }
                        this.loading = false

                        break;
                    case 1002:
                        this.loading = false
                        //console.log(resdata.msg)
                        break
                }
            });
        },
        //下一篇
        getNextMesDetials(textid, cate_id) {
            let _this = this;
            let Url = "/articledetail?a_id=" + textid + "&m_id=" + cate_id
            let Params = {};
            this.loading = true
            _this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        let adddata = resdata.data
                        if (adddata == null) {
                            _this.text_next = "没有下一篇了"
                        }
                        else {
                            _this.text_next = adddata.title

                        }
                        this.loading = false
                        break;
                    case 1002:
                        this.loading = false
                        //console.log(resdata.msg)
                        break
                }
            });
        },
        // 点击上一篇
        reduce() {
            this.getMesDetials(this.text_up_id, this.accessId);

        },
        //点击下一篇
        addnum() {
            this.getMesDetials(this.text_next_id, this.accessId);
        },
        //消息提示
        showError(type, status) {
            this.$message({
                type: type,
                showClose: true,
                center: true,
                message: status
            });
        },
    }
};
</script>
<style lang="scss"  scoped>
.el-container {
    overflow: hidden;
}
.el-main {
    overflow: hidden;
    padding: 0;
}

$font-color: #fff;
$bg-color: rgba(46, 139, 87, 0.4);
$btn-color: #409eff;
$shadow-color: 3px 7px 50px -12px rgba(64, 158, 255, 0.4);
@mixin bubbleAnimation($send1, $send2) {
    animation: bubble $send1 linear infinite,
        direction $send2 ease-in-out infinite alternate;
}
.mo_login {
    position: relative;
    max-width: 1200px;
    width: 100%;
    min-width: 1000px;
    height: auto;
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 35px;
    min-height: 685px;

    background: #fbfbfb;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    &:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        //background-image: linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%);
        z-index: -1;
    }
    .addbreadcrumb {
        width: 100%;
        height: 40px;
        font-size: 14px;
        padding-top: 13px;
        padding-left: 22px;
    }
    .periphery {
        width: 100%;
        height: auto;
        min-height: 635px;
        background: #ffffff;
        padding-top: 42px;
        overflow: hidden;
        .p-title {
            width: 100%;
            height: 38px;
            font-size: 27px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #252525;
            line-height: 38px;
            text-align: center;
        }
        .p-mesg {
            width: 100;
            height: 14px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #909339;
            line-height: 14px;
            margin-top: 18px;
            text-align: center;
            .addright {
                padding-right: 10px;
            }
            .addleft {
                padding-left: 10px;
            }
        }
        .p-img {
            width: 100%;
            height: 310px;
            border-radius: 6px;
            padding: 0 12% 0 13%;
            margin-top: 41px;
            .addimg {
                width: 100%;
                height: 100%;
            }
        }
        .p-text {
            width: 100%;
            height: auto;
            padding: 40px 46px 0 46px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 31px;
            letter-spacing: 1px;
            text-align: justify;
        }
         .p-comment {
            width: 100%;
            height: auto;
            padding: 40px 46px 0 46px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 31px;
            letter-spacing: 1px;
            text-align: justify;
        }
        .up-next {
            width: 100%;
            height: 30px;
            margin-top: 35px;
            margin-bottom: 15px;
            padding: 4px 16px 0 16px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 30px;
            letter-spacing: 1px;
            text-align: justify;
            .text-up {
                width: 20%;
                height: 100%;
                float: left;
                color: #333333;
                .addcolor:hover {
                    color: #558ffb;
                    text-decoration: underline;
                }
            }
            .text-next {
                width: 20%;
                height: 100%;
                float: right;
                .addcolor:hover {
                    color: #558ffb;
                    text-decoration: underline;
                }
            }
        }
    }
}
.mo_login /deep/ .el-loading-spinner {
    font-size: 30px;
}
.addpadding {
    padding: 0;
}
.DAEBFF {
    background: #daebff;
}
.F5F5FD {
    background: #f5f5fd;
}
.F0FFFE {
    background: #f0fffe;
}
.textOut {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
</style>